<template>
  <div class="channel-layer-container">
    <el-radio-group v-model="waterAreaType" size="mini" style="margin-bottom: 10px">
      <el-radio-button :label="1">一级水域</el-radio-button>
      <el-radio-button :label="2">二级水域</el-radio-button>
      <el-radio-button :label="3">监航水域</el-radio-button>
    </el-radio-group>
    <el-table :data="tableData" height="400" border size="mini" :row-style="{ cursor: 'pointer' }" @row-click="handleRowClick">
      <el-table-column prop="name" label="名称"> </el-table-column>
      <el-table-column prop="remark" label="说明" :show-overflow-tooltip="true"> </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getWaterAreaList } from '@/api/waterArea'
export default {
  data() {
    return {
      waterAreaList: [],
      waterAreaType: 1
    }
  },
  computed: {
    tableData() {
      return this.waterAreaList.filter((item) => item.type === this.waterAreaType)
    }
  },

  mounted() {
    this.queryWaterArea()
  },
  destroy() {},
  methods: {
    /**
     * 查询水域数据
     */
    queryWaterArea() {
      getWaterAreaList().then((res) => {
        if (res.result && res.result.length > 0) {
          this.waterAreaList = res.result
        }
      })
    },
    /**
     * 点击表格行
     */
    handleRowClick(row) {
      if (row.geom) {
        this.$emit('locate-area', row)
      }
    }
  }
}
</script>
<style lang="scss">
// .particle-overlay{
//   background-color:#0000008a
// }
</style>
<style lang="scss" scoped>
.channel-layer-container {
  padding: 10px;
}
</style>
